<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info-box">
      <el-card class="fix-info-card">
        <div slot="header">
          <span>
            <i class="el-icon-s-custom"></i> 基本信息
          </span>
        </div>
        <h4>角色:{{ role }}</h4>
        <h4>用户名:{{ username }}</h4>
        <h4>昵称:{{ nickname }}</h4>
        <h4>电话:{{ phone }}</h4>
        <h4>邮箱:{{ email }}</h4>
      </el-card>
      <el-card class="change-info-card">
        <div slot="header">
          <span>
            <i class="el-icon-s-tools"></i> 设置
          </span>
        </div>
        <el-form :model="infoForm" ref="infoForm" label-width="100px" class="form">
          <el-form-item
              class="label-font"
              label="昵称"
              prop="nickname"
              :rules="[{ required: true, message: '请输入你的昵称'}]"
          >
            <el-input style="width:35rem" v-model="infoForm.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <br/>
          <el-form-item
              class="label-font"
              label="电话"
              prop="phone"
              :rules="[{ required: true, message: '请输入你的电话号码'},{ len: 11, message: '请输入正确长度的电话号码'}]"
          >
            <el-input style="width:35rem" v-model="infoForm.phone" autocomplete="off"></el-input>
          </el-form-item>
          <br/>
          <el-form-item
              class="label-font"
              label="邮箱"
              prop="email"
              :rules="[{ required: true, message: '请输入你的邮箱'},{ type:'email', message: '无效的邮箱'}]"
          >
            <el-input style="width:35rem" v-model="infoForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <br/>
          <el-form-item>
            <el-button type="primary" @click="submitForm('infoForm')">修改</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      role: "",
      username: "",
      nickname: "",
      phone: "",
      email: "",
      infoForm: {
        nickname: "",
        phone: "",
        email: ""
      }
    };
  },
  mounted() {
    this.$post("/mainPage/getUserBasicInfo", {
      user_id: sessionStorage.getItem("user_id")
    }).then(res => {
      //处理response
      if (res.code === 504) {
        this.$message.warning(res.message);
        return;
      }
      if (res.code === 200) {
        // this.$root.user_id=res.data.user_id;
        if (res.data.role_id === "0") {
          this.role = "Admin";
        }
        if (res.data.role_id === "1") {
          this.role = "Brand-seller";
        }
        if (res.data.role_id === "2") {
          this.role = "借卖方";
        }
        this.username = res.data.username;
        this.nickname = res.data.name;
        this.phone = res.data.phone;
        this.email = res.data.email;
        // this.infoForm.nickname = res.data.name;
        // this.infoForm.phone = res.data.phone;
        // this.infoForm.email = res.data.email;
      }
    });
  },
  methods: {
    refresh() {
      this.$post("/mainPage/getUserBasicInfo", {
        user_id: sessionStorage.getItem("user_id")
      }).then(res => {
        //处理response
        if (res.code === 504) {
          this.$message.warning(res.message);
          return;
        }
        if (res.code === 200) {
          // this.$root.user_id=res.data.user_id;
          if (res.data.role_id === "0") {
            this.role = "Admin";
          }
          if (res.data.role_id === "1") {
            this.role = "Brand-seller";
          }
          if (res.data.role_id === "2") {
            this.role = "借卖方";
          }
          this.username = res.data.username;
          this.nickname = res.data.name;
          this.phone = res.data.phone;
          this.email = res.data.email;
          // this.infoForm.nickname = res.data.name;
          // this.infoForm.phone = res.data.phone;
          // this.infoForm.email = res.data.email;
        }
      });
    },
    //跳转到商店页面
    toStore: function () {

      this.$router.push({
        path: '/store',
      })

    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$post("/mainPage/updateUserBasicInfo", {
            user_id: sessionStorage.getItem("user_id"),
            name: this.infoForm.nickname,
            phone: this.infoForm.phone,
            email: this.infoForm.email
          }).then(res => {
            //处理response
            if (res.code === 504) {
              this.$message.warning(res.message);
              this.$refs[formName].resetFields()
              return;
            }
            if (res.code === 200) {
              this.$message.success(res.message);
              this.$refs[formName].resetFields()
              this.refresh();
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.info-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 3rem;
}

.fix-info-card {
  width: 25rem;
  height: 25rem;
}

.change-info-card {
  width: 65rem;
  height: 30rem;
}

.form {
  margin-top: 1rem;
  margin-left: 6rem;
}

.label-font >>> .el-form-item__label {
  font-size: 17px;
  font-weight: bold;
}
</style>
